<template>
    <div class="template">
        <!-- 左边导航部分 -->
        <!-- elementplus 菜单导航 -->
        <el-menu @select="selectMenu" background-color="#304156" text-color="#BFCBD9" :default-active="menu[0].children[0].name"
            :collapse="isCollapse">
            <el-sub-menu popper-class="smallMenu" v-for="(item, index) in menu" :key="item.id" :index="`${item.name}`">
                <template #title>
                    <!-- 一级菜单的图标 -->
                    <el-icon>
                        <i :class="`iconfont icon-${item.icon}`"></i>
                    </el-icon>
                    <span>
                        {{ item.title }}
                    </span>
                </template>
                <el-menu-item-group>
                    <el-menu-item v-for="(items, i) in item.children" :key="items.id" :index="`${item.name == '' ? '' : '/'+item.name }/${items.name}`">
                        <el-icon>
                            <i :class="`iconfont icon-${items.icon}`"></i>
                        </el-icon>
                        <span>
                            {{ items.title }}
                        </span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
        </el-menu>
        <!-- 右边内容部分 -->
        <aside :class="{
            aside_active: isCollapse,
            aside: !isCollapse
        }">
            <header>
                <div class="left">
                    <div @click="changeIsCollapse()">
                        <el-icon>
                            <!-- 动态组件 -->
                            <component :is="comName"></component>
                        </el-icon>
                    </div>
                    <el-breadcrumb separator="/">
                        <template v-for="(item,index) in breadData" :key="index">
                            <el-breadcrumb-item
                                v-if="index < breadData.length - 2"
                                :to="{name: item.name}"
                            >
                                {{ item.title }} 
                            </el-breadcrumb-item>
                            <el-breadcrumb-item
                                v-else-if="index == breadData.length - 2"
                            >
                                <a href="javascript:;">
                                    {{ item.title }} 
                                </a>
                            </el-breadcrumb-item>
                            <el-breadcrumb-item
                                v-else
                            >
                                {{ item.title }} 
                            </el-breadcrumb-item>
                        </template>
                    </el-breadcrumb>
                </div>
                <div class="right">
                    <el-dropdown trigger="click" @command="handleCommand">
                        <div class="icon">
                            <img :src="headImg" alt="">
                            <el-icon class="icon">
                                <CaretBottom />
                            </el-icon>
                        </div>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="home">首页</el-dropdown-item>
                                <el-dropdown-item command="loginOut">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </header>
            <!-- 显示内容 -->
            <router-view />
        </aside>
    </div>
</template>
<script setup lang="ts">
// 导入获取菜单的接口
import { Info } from '@/api/index'
// 导入router
import router from '@/router'
// 导入vue3的 ref
import { ref,watch } from 'vue';
// 导入vue3的Ref 
import type { Ref } from 'vue';
// 引入图标文件
import { CaretBottom, Fold, Expand } from '@element-plus/icons-vue'
// 导出路由信息实例
import { useRoute } from 'vue-router';
// ts判断
interface menuData {
    title?: string,
    sort?: number,
    parentId?: number,
    name?: string,
    level?: number,
    id?: number,
    icon?: string,
    hidden?: number,
    children?: any
}
// 创建menu
let menu: Ref<menuData[]> = ref([
    {
        "id": 31,
        "parentId": 0,
        "createTime": "2020-02-02T06:50:36.000+00:00",
        "title": "首页",
        "level": 0,
        "sort": 0,
        "name": "",
        "icon": "product",
        "hidden": 0,
        "children": [
            {
                "id": 32,
                "parentId": 31,
                "createTime": "2020-02-02T06:51:50.000+00:00",
                "title": "仪表盘",
                "level": 1,
                "sort": 0,
                "name": "home",
                "icon": "product-list",
                "hidden": 0
            },
            {
                "id": 33,
                "parentId": 31,
                "createTime": "2020-02-02T06:52:44.000+00:00",
                "title": "学习教程",
                "level": 1,
                "sort": 0,
                "name": "study",
                "icon": "product-add",
                "hidden": 0
            },
            {
                "id": 34,
                "parentId": 31,
                "createTime": "2020-02-02T06:53:51.000+00:00",
                "title": "视频教程",
                "level": 1,
                "sort": 0,
                "name": "video",
                "icon": "product-cate",
                "hidden": 0
            }
        ]
    }
]);
// 用户头像
let headImg: Ref<string> = ref('');
// 是否折叠菜单
let isCollapse: Ref<boolean> = ref(false)
// 显示的图标的名称
let comName: Ref<any> = ref(Fold);
// 菜单的一维数组数据
let menuFirst:Array<menuData> = []
// 调用获取菜单事件
getMenu();
// 定义获取菜单的事件
function getMenu() {
    Info().then((res: any) => {
        // 判断是否获取数据成功
        if (res.code == 200) {
            menuFirst = res.data.menus;
            headImg.value = res.data.icon;
            // 拿出parentId == 0的数据
            menu.value = [...menu.value, ...res.data.menus.filter((item: any) => item.parentId === 0)];
            // 数据匹配
            for (const i in menu.value) {
                // 第一个不执行
                if(i === '0'){
                    continue;
                }
                // 给每一个menu加上 children 字段
                menu.value[i].children = [];

                // 挨个匹配
                for (let index = 0; index < res.data.menus.length; index++) {
                    const item = res.data.menus[index];
                    // 判断外层的循环的ID是否等于内层循环的parentID
                    if (menu.value[i].id == item.parentId) {
                        menu.value[i].children.push(item)
                    }
                }
            }
        } else {
            // 没有获取成功
            router.push('/login')
        }
    })
}

// 菜单激活回调函数
function selectMenu(path: string) {
    router.push({
        path
    })
}

// 点击头像选项的回调
function handleCommand(e: string) {
    console.log(e);
}

// 关闭或者打开菜单
function changeIsCollapse() {
    isCollapse.value = !isCollapse.value
    comName.value = isCollapse.value === true ? Expand : Fold
}

// 创建路由信息
const route = useRoute();
// 监听route 变化
watch(route,() => {
    celData(route.fullPath.split('/'))
})
// 定义ts
interface breadDataTs {
    title: string | undefined,
    name: string
}
// 面包屑数据
const breadData:Ref<breadDataTs[]> = ref([{
            title: '仪表盘',
            name: 'home'
        }])
// 处理数据
function celData(data:Array<string>){
    breadData.value = [];
    // 判断data的长度
    if(data.length <= 2){
        breadData.value.push({
            title: '仪表盘',
            name: 'home'
        })
        return 
    }
    if(data.findIndex(item => item === 'home') == -1){
        breadData.value.push({
            title: '首页',
            name: 'home'
        })
    }
    // 删除数组的第一项
    data.shift();
    for (const i in data) {
        for (const index in menuFirst) {
            let obj = menuFirst[index];
            if(data[i] == obj.name){
                breadData.value.push({
                    title: obj.title,
                    name: obj.name
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.template {

    .aside,
    .aside_active {
        width: 100vw;
        min-height: 100vh;
        box-sizing: border-box;
        padding-left: 180px;
        transition: all 0.3s;

        header {
            width: 100%;
            height: 50px;
            line-height: 50px;
            box-sizing: border-box;
            padding: 0 10px;
            box-shadow: 0 1px 1px #999;
            display: flex;
            justify-content: space-between;

            .right,
            .left {
                display: flex;
                justify-content: center;
                align-items: center;
                padding-right: 30px;
            }

            .left {
                padding-right: 0;
            }

            img {
                width: 40px;
                border-radius: 3px;
            }
        }
    }

    .aside_active {
        padding-left: 64px;
    }
}

.el-menu {
    position: fixed;
    height: 100vh;
    overflow-y: auto;

    &::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}

.el-menu.el-menu--vertical.v-enter-to,
.el-menu.el-menu--vertical {
    width: 180px;
}

.el-menu.el-menu--vertical.el-menu--collapse.v-enter-to {
    width: 64px;
}

.el-menu-item-group {
    background-color: black;
}

.el-breadcrumb {
    line-height: 50px;
}

span {
    font-family: '微软雅黑';
}

.icon {
    cursor: pointer;
}</style>